<template>
  <div class="bg-w">
    <div class="box flex-al container">
      <!-- <build-el-bread></build-el-bread> -->
      <div class="w100">
        <build-el-h1 name="大赛详情-标题.png"></build-el-h1>
      </div>
      <build-el-video :src="details.contestVideoUrl" :poster="home.data.poster"></build-el-video>
      <p class="infom">{{details.contestText}}</p>
      <div class="w100" v-margin-top="'30px'">
        <build-el-h1 name="大赛进度标题.png"></build-el-h1>
        <div class="fwb" v-html="details.contestSchedule"></div>
        <!-- <div class="flex-row">
            <div v-for="(item,index) in progress.data" :key="index+item.name" class="flex-row">
                <build-el-hexagon :name="item.name" :date="item.date"></build-el-hexagon>
                <div class="line-row" v-if="index!=progress.data.length-1"></div>
            </div>
        </div>-->
      </div>
      <div v-margin-top="'30px'"></div>
    </div>
  </div>
</template>
<script>
import buildElBread from '@/components/build-el-bread'
import buildElH1 from '@/components/build-el-h1'
import buildElVideo from '@/components/build-el-video'
import buildElHexagon from '@/components/build-el-hexagon'
import JSONData from '@/assets/JSON'
export default {
  components: {
    buildElBread,
    buildElH1,
    buildElVideo,
    buildElHexagon,
  },
  data() {
    return {
      ...JSONData,
      details: {},
    }
  },
  async mounted() {
    let res = await this.api.findDownloadFile({ customizeId: 2 })
    this.details = res
    console.log(this.details)
  },
}
</script>
<style lang="less" scoped>
.infom {
  width: 100%;
  margin-top: 37px;
  font-size: 16px;
  color: #333333;
  letter-spacing: 0;
  line-height: 24px;
  display: block;
}
.line-row {
  width: 68px;
  margin: 0 30px;
  background: #f03a0a;
}
</style>
<style >
body {
  background: #fff;
}
</style>
